<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null">
    <logo />
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      :mode="mode"
      @select="onSelect"
      style="padding: 16px 0px;"></s-menu>
  </a-layout-sider>

</template>

<script>
import Logo from '@/components/tools/Logo';
import SMenu from './index';
import { mixin, mixinDevice } from '@/utils/mixin';

export default {
  name: 'SideMenu',
  components: { Logo, SMenu },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline',
    },
    theme: {
      type: String,
      required: false,
      default: 'dark',
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menus: {
      type: Array,
      required: true,
    },
  },
  methods: {
    onSelect(obj) {
      this.$emit('menuSelect', obj);
    },
  },
};
</script>
<style lang="less">
  .sider{
    .logo{
      // background: #FFD6F4!important; //Babymo

      // background: #0059A1!important; //NFC
      // img{
      //   width: 180px !important;
      //   height: inherit !important;
      // }
      // h1{
        // display: none !important;
      // }
    }
    .ant-layout-sider-children{
      // background: #FFF4FC!important; //Babymo

      // background: url("~@/assets/nfcImg/sideBg.png") no-repeat !important; //NFC
      // background-size: 100% 100% !important;  //NFC
    }
  }
  .ant-menu-dark{
    // background: rgba(0, 0, 0, 0) !important; //NFC
  }
  .ant-menu-inline.ant-menu-sub{
    // background: #FFF4FC!important;
    // background: rgba(0, 67, 134, .75) !important; //NFC
  }
  // .ant-menu-dark{
  //   color: #F548AB!important;
  // }
  // .ant-menu-dark .ant-menu-submenu-title:hover{
  //   color: #FFD6F4!important;
  // }
  // .ant-menu-dark .ant-menu-submenu-open, .ant-menu-dark .ant-menu-submenu-selected{
  //   color: #F548AB!important;
  // }
  // .ant-menu-dark .ant-menu-item, .ant-menu-dark .ant-menu-item-group-title, .ant-menu-dark .ant-menu-item > a {
  //   color: #F548AB!important;
  // }
  
  // .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:after{
  //   background: #F548AB!important;
  // }
  // .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before{
  //   background: #f548ab!important;
  // }

  // .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after{
  //   background: #F548AB!important;
  // }
  //  .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before{
  //   background: #F548AB!important;
  // }
  // .ant-menu-dark .ant-menu-inline.ant-menu-sub{
  //   box-shadow: 0 2px 8px rgba(245, 72, 171, .45) inset !important;
  // }

  // 头部背景 NFC
  // .layout.ant-layout .header{
  //     background: url("~@/assets/nfcImg/headerBg.png") no-repeat !important;
  //     background-size: 100% 100% !important;
  //     color: #fff !important;
  // }
  // .layout.ant-layout .header .user-wrapper .action{
  //   color: #fff !important;
  // }


</style>
